import React from 'react';
import {Flex, List, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import {Layout, Line} from '../../components';
import './index.less';

const Item = List.Item;
const FlexItem = Flex.Item;
const Brief = Item.Brief;
const alert = Modal.alert;

class Account extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount() {

  }

  JumpBindBank() {
    this.props.history.push('/bank');
  }

  render() {

    const RenderLine = <div className={'a-line a-line-loan'}>
      <Flex justify={'center'} align={'center'} className={'a-inner'}>
        <FlexItem>
          <div className={'a-line-item'}>
            <span>借款记录</span>
          </div>
        </FlexItem>
        <FlexItem align={'right'}>
          <Icon type="right" color={'#858585'} size={'md'}/>
        </FlexItem>
      </Flex>
    </div>;

    return (
      <Layout className={'page-account'}>
        {/*头部内容*/}
        <div className={'header'}>
          <Flex style={{height: "100%"}} justify={'center'}>
            <div className={'h-left'}>
              <div className={'avatar'}>
                <img src={require('../../assets/imgs/i-boy.png')} className={'avatarImg'}/>
              </div>
              <div className={'info'}>
                <div>13588322792</div>
                <div>未认证</div>
              </div>
            </div>
            <Flex.Item align={'right'}>
              <Icon type="right" size={'md'}/>
            </Flex.Item>
          </Flex>

        </div>

        {/*个人中心列表*/}
        <div className={'section'}>
          <Line
            title={'借款记录'}
            onClick={() => {
              this.props.history.push('/loanRecord');
            }}
            icon={true}
            className={'a-line-loan'}/>
          <WhiteSpace size="lg"/>
          <Line
            title={'我的额度'}
            onClick={() => {
              this.props.history.push('/quota');
            }}
            icon={true}
            className={'a-line-quota'}/>
          <Line
            title={'银行卡'}
            onClick={() => {
              alert('温馨提示', '您还没有进行实名认证', [
                {
                  text: '取消',
                  onPress: () => {

                  }
                },
                {
                  text: '去认证',
                  onPress: () => {
                    this.JumpBindBank();
                  }
                },
              ])
            }}
            icon={true}
            className={'a-line-bank'}/>
          <Line
            title={'关于我们'}
            onClick={() => {
              this.props.history.push('/about');
            }}
            icon={true}
            className={'a-line-about'}/>


        </div>

        {/* 按钮 */}
        <footer className={'footer'}>
            联系客服<a href="tel:13764567708">400-005-7890</a>
        </footer>
      </Layout>
    );
  }
}

Account.propTypes = {};

export default Account;
